<template>
  <div class="popup" v-if="show">
    <h1 class="title">{{ updateData.id ? "修改" : "发布" }}文章</h1>
    <div class="content">
      <div class="item">
        <p>添加标签：</p>
        <el-select v-model="state.currentValue" multiple filterable placeholder="请选择标签">
          <el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="item">
        <p>发表时间：</p>
        <el-date-picker v-model="state.publishTime" type="date" placeholder="请选择时间" />
      </div>
      <div class="item">
        <p>文章封面：</p>
        <img v-if="state.imageUrl" :src="state.imageUrl" class="avatar" />
        <p class="btn_image" @click="genImage">
          <span>{{ state.imageUrl ? "更换图片" : "生成图片" }}</span>
          <span class="ml20" v-show="uploadStatus">正在获取图片...</span>
        </p>
      </div>
      <div class="item">
        <p>编辑摘要：</p>
        <el-input v-model="state.desc" maxlength="100" placeholder="" rows="5" show-word-limit type="textarea" />
      </div>
    </div>
    <div class="bottom">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="send(1)">保存发布</el-button>
      <el-button type="primary" @click="send(2)">保存发布并返回列表</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getTagApi } from "@/api/modules/article";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import dayjs from "dayjs";

// 图片通过axios请求链接
interface select {
  label: string;
  value: number | string;
}

const state = reactive({
  options: <select[]>[],
  currentValue: <any>"",
  publishTime: <string>"",
  desc: <string>"",
  imageUrl: <string>""
});

const emits = defineEmits(["onCancel", "onSuccess"]);
const props = defineProps({
  show: Boolean,
  updateData: <any>{}
});

onMounted(async () => {
  // const { data, code } = await getTagApi();
  // if (code === "200") {
  //   state.options = data;
  // }
  const res: any = await getTagApi();
  if (res.code === "200") {
    state.options = res.data;
  }

  if (props.updateData?.id) {
    state.imageUrl = props.updateData?.cover;
    state.desc = props.updateData?.desc;
    state.currentValue = JSON.parse(props.updateData?.tag_ids);
    state.publishTime = props.updateData?.create_time;
  } else {
    state.publishTime = dayjs().format("YYYY-MM-DD");
  }
});

const cancel = () => {
  emits("onCancel", "取消");
};

const send = (type: any) => {
  let { currentValue, imageUrl, desc, publishTime } = state;

  if (!currentValue.length || !publishTime || !imageUrl || !desc) {
    ElMessage.warning("请保证标签、封面、发表时间以及编辑摘要填写完整");
    return;
  }

  // console.log('参数', state.desc, state.currentValue, state.imageUrl)
  let item = JSON.stringify({ desc, label: currentValue, publishTime, cover: imageUrl });
  emits("onSuccess", item, type);
};

/**
 * 获取 api.unsplash 的图片 实测 显示太慢了
 * 2023-3-1 优化 增加一个上传的提示，因为获取unsplash的图片容易出现图片加载失败的问题
 * 所以添加一个可视化的 上传过程这样会好一些
 */

const uploadStatus = ref(false);
const genImage = async () => {
  uploadStatus.value = true;
  const { data } = await axios.get("https://api.unsplash.com/photos/random", {
    params: {
      client_id: "hcOvHaEG3wwoKmlttKrvR7cLwRwnF4HC3fV2OVY1a-s",
      orientation: "squarish"
    }
  });
  // 这里获取 thumb 缩略图 可能会加载快一点
  state.imageUrl = data?.urls?.thumb || "";
  if (state.imageUrl) uploadStatus.value = false;
  console.log("result", state.imageUrl);
};
</script>

<style scoped lang="scss">
@mixin font-set($size: false, $color: false, $weight: false, $lh: false) {
  @if $size {
    font-size: $size;
  }

  @if $color {
    color: $color;
  }

  @if $weight {
    font-weight: $weight;
  }

  @if $lh {
    line-height: $lh;
  }
}

@mixin flex-auto($al: false, $jc: false, $row: row) {
  display: flex;
  flex-direction: $row;

  @if $al {
    align-items: $al;
  }

  @if $jc {
    justify-content: $jc;
  }
}
.popup {
  position: absolute;
  top: 60px;
  right: 124px;
  z-index: 100;
  width: 560px;
  font-size: 14.5px;
  color: #909090;
  white-space: nowrap;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 2px;
  box-shadow: 0 1px 2px #f1f1f1;
  &::before {
    position: absolute;
    top: -7.2px;
    right: 60px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    content: "";
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
  }
  .title {
    @include font-set(20px, #1a1a1a, 400, 0.5);

    padding: 20px 0 20px 20px;
  }
  .content {
    padding: 20px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    .item {
      // @include flex-auto;
      margin-bottom: 30px;
      font-size: 14px;
      p {
        padding: 5px 8px 0 0;
        color: #1a1a1a;
      }
      .btn_image {
        color: #1890ff;
        cursor: pointer;
      }
      &:last-child {
        margin-bottom: 0;
      }
      .avatar {
        width: 261px;
        height: 147px;
      }
      .box {
        position: relative;
        width: 261px;
        height: 147px;
        background-color: #eeeeee;
        .progress {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          padding: 0 10px;
          transform: translate(-50%, -50%);
        }
      }
      .avatar-uploader {
        position: relative;
        .delete {
          position: absolute;
          top: 0;
          right: 0;
          width: 38px;
          height: 38px;
          font-size: 24px;
          color: #333333;
          background-color: #dddddd;

          @include flex-auto(center, center);
        }
      }
      .avatar-uploader .el-upload {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        transition: var(--el-transition-duration-fast);
      }
      .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
      }
      .el-icon.avatar-uploader-icon {
        position: relative;
        z-index: 0;
        width: 261px;
        height: 147px;
        font-size: 28px;
        color: #8c939d;
        text-align: center;
        background-color: #eeeeee;
      }
    }
  }
  .bottom {
    padding: 20px;
    text-align: right;
  }
}
</style>
